<template>
  <div class="toolbar">
    <el-button v-for="(item, index) in data" :key="index" type="text" class="toolbar-button" size="small" @click="toolbarDialogVisible(item.name, item.text)">
      <i :class="'el-icon-' + item.class + ' font-13'"></i>
      <span class="font-13">{{ item.text }}</span>
    </el-button>
    <div v-if="search.enable" class="fr el-row--flex is-justify-space-between is-align-middle" style="height: 100%">
      <el-input v-model="keywords" :placeholder="search.placeholder" style="width: 80%" size="small">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <el-button type="text" size="small" class="toolbar-button" @click="advancedSearch">
        <span class="font-13">高级搜索</span>
      </el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Toolbar',
  props: {
    config: {
      type: Array,
      default() {
        return []
      }
    },
    search: {
      type: Object,
      default() {
        return {
          enable: false,
          placeholder: '请输入搜索值'
        }
      }
    }
  },
  data() {
    return {
      keywords: '',
      data: [],
      mapper: {
        create: {
          name: 'add',
          class: 'plus',
          text: '添加'
        },
        batchdestroy: {
          name: 'del',
          class: 'delete',
          text: '删除'
        },
        import: {
          name: 'import',
          class: 'upload2',
          text: '导入'
        },
        export: {
          name: 'export',
          class: 'download',
          text: '导出'
        },
        batchedit: {
          name: 'batchedit',
          class: 'edit',
          text: '批量修改'
        },
        refresh: {
          name: 'refresh',
          class: 'refresh',
          text: '刷新'
        },
        review: {
          name: 'review',
          class: 's-check',
          text: '审核'
        },
        link: {
          name: 'link',
          class: 'link',
          text: '联查'
        }
      }
    }
  },
  watch: {
    config: {
      handler(newVal) {
        newVal.forEach(item => {
          if (this.mapper[item]) {
            this.data.push(this.mapper[item])
          }
        })
      },
      immediate: true
    }
  },
  methods: {
    advancedSearch() {

    },
    toolbarDialogVisible(event, text) {
      this.$emit('dialog', event, text, this.config.type)
    }
  }
}
</script>
<style lang="scss" scoped>
.toolbar {
  margin-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
  height: 45px;
  line-height: 45px;

  .el-button+.el-button {
    margin-left: 0;
  }
  &-button {
    padding: 7px;
  }
}
.el-button [class*="el-icon-"]+span {
  margin-left: 0;
}
</style>
